<template>
  <div class="table">
    <div class="container shadow rounded">
      <div class="handle-box">
        <el-select
          v-model="informType"
          placeholder="筛选对象"
          clearable
          class="handle-select mr10"
        >
          <el-option label="部门" value="department"></el-option>
          <el-option label="组织" value="organization"></el-option>
          <el-option label="个人" value="person"></el-option>
        </el-select>
        <el-button plain icon="search" @click="getNewsByType"
          >对象查询</el-button
        >
        <el-date-picker
          type="date"
          placeholder="筛选日期"
          v-model="informDate"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-button plain icon="searchAll" @click="getNewsByDate"
          >日期查询</el-button
        >
        <el-button plain icon="" @click="showPublishNews">发布通知</el-button>
      </div>
      <el-table :data="data" border class="table">
        <el-table-column
          type="text"
          align="center"
          label="通知编号"
          prop="newsId"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="发布对象"
          prop="informType"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="发布内容"
          prop="content"
        ></el-table-column>
        <el-table-column
          type="text"
          align="center"
          label="发布时间"
          prop="time"
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="this.cur_page"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
        <div style="float: right;margin-top: -22px;margin-right: 178px;">
          共{{ this.total }}条
        </div>
      </div>
    </div>
    <el-dialog
      title="发布通知"
      :visible.sync="showSentInfo"
      width="400px"
      class="sentInfo"
      center
    >
      <ul class="room-info">
        <li>
          <strong>发 布 至 :</strong>
          <el-select v-model="publishInfo.did" class="alter-select">
            <el-option label="所有部门" :value="null"></el-option>
            <el-option
              :label="item.name"
              :key="item.id"
              :value="item.id"
              v-for="item of this.departmentList"
            ></el-option>
          </el-select>
        </li>
        <li>
          <strong>通知内容:</strong
          ><el-input
            v-model="publishInfo.message"
            class="alter-input"
            :autosize="{ minRows: 5, maxRows: 9 }"
            type="textarea"
          ></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="sentNews">发布</el-button>
        <el-button type="primary" @click="showSentInfo = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import ElOption from "element-ui/packages/select/src/option";
export default {
  components: { ElOption },
  name: "Table",
  data() {
    return {
      url: "http://119.23.110.183:8080",
      tableData: [],
      pageData: [],
      page: [],
      cur_page: 1,
      participants: [],
      showSentInfo: false,
      informType: "department",
      informDate: "2019-03-04",
      meetingRoomList: [],
      departmentList: [],
      publishInfo: {
        oid: 5,
        did: 1,
        message: null,
        sentId: 5
      },
      idx: -1,
      total: 0
    };
  },
  computed: {
    data: function() {
      return this.page;
    }
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      this.getMeetingRooms();
      this.getDepartments();
      this.getNewsByType();
    },
    getMeetingRooms() {
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios.post(this.url + "/getMeetingRoomList").then(res => {
        res = res.data;
        const _this = this;
        if (res.code === 0) {
          const data = res.data;
          const list = data.meetingRooms;
          for (let i = 0; i < list.length; i++) {
            _this.meetingRoomList.push({
              id: list[i].roomId,
              name: list[i].roomName
            });
          }
        }
      });
    },
    getDepartments() {
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios.post(this.url + "/getDepartments", { oid: 5 }).then(res => {
        res = res.data;
        const _this = this;
        if (res.code === 0) {
          const data = res.data;
          const list = data.Departments;
          _this.departmentList = []
          for (let i = 0; i < list.length; i++) {
            _this.departmentList.push({
              id: list[i].departmentId,
              name: list[i].departmentName
            });
          }
        }
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData(val);
    },
    getNewsByType() {
      this.informDate = "";
      this.page = [];
      this.pageList = [];
      this.tableData = [];
      this.pageData = [];
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios
        .post(this.url + "/getNewsByType?informType=" + this.informType)
        .then(res => {
          res = res.data;
          this.tableData = res.data.news;
          this.total = this.tableData.length;
          const length = this.total;
          const data = this.tableData;
          const pageD = this.pageData;
          const pageNum = this.total / 10;
          for (let i = 0; i < pageNum; i++) {
            let page = {};
            page.pagen = i;
            let pageList = [];
            for (let j = 0; j < 10; j++) {
              if (i * 10 + j + 1 > length) {
                break;
              }
              if (data[i * 10 + j].informType === "department") {
                data[i * 10 + j].informType = "部门";
              } else if (data[i * 10 + j].informType === "orgnization") {
                data[i * 10 + j].informType = "组织";
              } else if (data[i * 10 + j].informType === "person") {
                data[i * 10 + j].informType = "个人";
              } else {
                data[i * 10 + j].informType = "未知";
              }
              data[i * 10 + j].time = data[i * 10 + j].time
                .substring(0, 16)
                .replace(/T/g, "\n");
              pageList.push(data[i * 10 + j]);
              page.pageList = pageList;
            }
            pageD.push(page);
          }
          this.handleCurrentChange(1);
        });
    },
    getNewsByDate() {
      this.informType = "";
      this.page = [];
      this.pageList = [];
      this.tableData = [];
      this.pageData = [];
      axios
        .get(this.url + "/getNewsByDate?date=" + this.informDate)
        .then(res => {
          res = res.data;
          this.tableData = res.data.news;
          this.total = this.tableData.length;
          const length = this.total;
          const data = this.tableData;
          const pageD = this.pageData;
          const pageNum = this.total / 10;
          for (let i = 0; i < pageNum; i++) {
            let page = {};
            page.pagen = i;
            let pageList = [];
            for (let j = 0; j < 10; j++) {
              if (i * 10 + j + 1 > length) {
                break;
              }
              if (data[i * 10 + j].informType === "department") {
                data[i * 10 + j].informType = "部门";
              } else if (data[i * 10 + j].informType === "organization") {
                data[i * 10 + j].informType = "组织";
              } else if (data[i * 10 + j].informType === "person") {
                data[i * 10 + j].informType = "个人";
              } else {
                data[i * 10 + j].informType = "未知";
              }
              data[i * 10 + j].time = data[i * 10 + j].time
                .substring(0, 16)
                .replace(/T/g, "\n");
              pageList.push(data[i * 10 + j]);
              page.pageList = pageList;
            }
            pageD.push(page);
          }
          this.handleCurrentChange(1);
        });
    },
    getData(val) {
      this.page = this.pageData[val - 1].pageList;
    },
    showPublishNews() {
      this.showSentInfo = true;
    },
    sentNews() {
      const _this = this;
      // this.publishInfo.message = "这是一条通知";
      console.log(this.publishInfo);
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios
        .post(
          "http://119.23.110.183:8080/publishNews?oid=1" +
            //this.publishInfo.oid +
            "&did=1" +

          //this.publishInfo.did +
            "&message=" +
            this.publishInfo.message +
            "&sentId=" +
            this.publishInfo.sentId
        )
        .then(function(res) {
          res = res.data;
          if (res.code === 0) {
            _this.$message({
              message: "发布成功",
              type: "success"
            });
          } else {
            _this.$message({
              message: "发布成功",
              type: "success"
            });
            // _this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
      });
      this.publishInfo.message = "";
      this.publishInfo.did = 1;
      this.showSentInfo = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  margin-top: 85px;
  padding: 10px;
  background: #fff;
  //border-radius: 5px;
  margin-left: 170px;
}
.pagination {
  margin: 26px;
  text-align: right;
  margin-top: -10px;
}

.el-table tr:hover {
  background: #f6faff;
}
.handle-box {
  margin-top: 15px;
  margin-left: 20px;
  margin-bottom: -25px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table{
  margin:45px 20px;
  width: 95%;
  font-size: 14px;
}
.mr10{
  margin-right: 10px;
}
.sentInfo{
  padding-bottom: 100px;
}
.dialog-footer
  margin-right -190px
.alter-select {
  width: 200px;
  height: 60px
  margin-left: 21px;
  line-height: 20px;
}
.alter-input {
  width 230px
  margin-left: 84px;
  line-height: 20px;
}
</style>
